<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Two Pendulums</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 2;
            ctx.font = 'italic 20px Times New Roman';

            // --- Geometric Parameters ---
            const R = 70;
            const p1_sus = { x: 200, y: 120 }; // Suspension point on lower ceiling
            const p2_ceil = { x: 420, y: 50 };  // Point on upper ceiling
            const angle1_deg = -40;
            const angle1_rad = angle1_deg * Math.PI / 180;

            // --- Helper Functions ---
            function drawArrow(from, to, size = 8) {
                const angle = Math.atan2(to.y - from.y, to.x - from.x);
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(from.x, from.y);
                ctx.lineTo(to.x, to.y);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(to.x, to.y);
                ctx.lineTo(to.x - size * Math.cos(angle - Math.PI / 6), to.y - size * Math.sin(angle - Math.PI / 6));
                ctx.lineTo(to.x - size * Math.cos(angle + Math.PI / 6), to.y - size * Math.sin(angle + Math.PI / 6));
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }

            function drawArrowOnLine(x, y, angle, size = 8) {
                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(-size, -size / 2);
                ctx.lineTo(-size, size / 2);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }
            
            function drawArrowhead(point, angle, size = 8) {
                 ctx.save();
                 ctx.translate(point.x, point.y);
                 ctx.rotate(angle);
                 ctx.beginPath();
                 ctx.moveTo(0,0);
                 ctx.lineTo(-size, size*0.5);
                 ctx.lineTo(-size, -size*0.5);
                 ctx.closePath();
                 ctx.fill();
                 ctx.restore();
            }

            function drawHatchedSurface(x1, y1, x2, y2, spacing = 8, angle = -Math.PI / 4) {
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();

                const length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
                const lineAngle = Math.atan2(y2 - y1, x2 - x1);
                const hatchLength = 10;

                ctx.save();
                ctx.lineWidth = 1;
                for (let i = 0; i < length; i += spacing) {
                    const startX = x1 + i * Math.cos(lineAngle);
                    const startY = y1 + i * Math.sin(lineAngle);
                    const endX = startX + hatchLength * Math.cos(lineAngle + angle);
                    const endY = startY + hatchLength * Math.sin(lineAngle + angle);
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(endX, endY);
                    ctx.stroke();
                }
                ctx.restore();
            }

            // --- Draw Ceilings ---
            drawHatchedSurface(p1_sus.x - 120, p1_sus.y, p1_sus.x + 100, p1_sus.y);
            drawHatchedSurface(p2_ceil.x - 100, p2_ceil.y, p2_ceil.x + 120, p2_ceil.y);

            // --- Draw Pendulum 1 (left) ---
            const c1 = {
                x: p1_sus.x + R * Math.sin(angle1_rad),
                y: p1_sus.y + R * Math.cos(angle1_rad)
            };
            // Rod
            ctx.beginPath();
            ctx.moveTo(p1_sus.x, p1_sus.y);
            ctx.lineTo(c1.x, c1.y);
            ctx.stroke();
            // Disk
            ctx.beginPath();
            ctx.arc(c1.x, c1.y, R, 0, 2 * Math.PI);
            ctx.stroke();
            
            // --- Labels for disk 1 ---
            // m1 label
            ctx.save();
            ctx.setLineDash([3, 3]);
            ctx.beginPath();
            ctx.moveTo(c1.x - 5, c1.y);
            ctx.lineTo(c1.x - 25, c1.y + 20);
            ctx.lineTo(c1.x - 45, c1.y + 15);
            ctx.stroke();
            ctx.restore();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('m', c1.x - 20, c1.y + 18);
            ctx.font = 'italic 15px Times New Roman';
            ctx.fillText('1', c1.x - 12, c1.y + 25);
            ctx.font = 'italic 20px Times New Roman';

            // Radius R label
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            drawArrow({ x: c1.x, y: c1.y }, { x: c1.x - R, y: c1.y });
            ctx.fillText('R', c1.x - R / 2, c1.y - 5);

            // Rod R label
            ctx.save();
            ctx.translate((p1_sus.x + c1.x) / 2, (p1_sus.y + c1.y) / 2);
            ctx.rotate(angle1_rad);
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            ctx.fillText('R', 10, 0);
            ctx.restore();

            // Motion arrow
            ctx.save();
            ctx.lineWidth = 1.5;
            const arc_center = { x: c1.x - 10, y: c1.y + R + 30 };
            const arc_radius = 60;
            const start_angle = Math.PI * 1.35;
            const end_angle = Math.PI * 1.75;
            ctx.beginPath();
            ctx.arc(arc_center.x, arc_center.y, arc_radius, start_angle, end_angle);
            ctx.stroke();
            const arrow_pos = {
                x: arc_center.x + arc_radius * Math.cos(end_angle),
                y: arc_center.y + arc_radius * Math.sin(end_angle)
            };
            drawArrowhead(arrow_pos, end_angle, 10);
            ctx.restore();

            // --- Draw Pendulum 2 (right) ---
            const c2 = { x: p2_ceil.x, y: p2_ceil.y + 2 * R };
            
            // Dashed vertical line
            ctx.save();
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(p2_ceil.x, p2_ceil.y);
            ctx.lineTo(p2_ceil.x, c2.y + R + 20);
            ctx.stroke();
            ctx.restore();
            
            // Suspension rod
            ctx.beginPath();
            ctx.moveTo(p2_ceil.x, p2_ceil.y);
            ctx.lineTo(c2.x, c2.y);
            ctx.stroke();
            
            // Disk
            ctx.beginPath();
            ctx.arc(c2.x, c2.y, R, 0, 2 * Math.PI);
            ctx.stroke();

            // --- Labels for disk 2 ---
            // m2 label
            ctx.save();
            ctx.setLineDash([3, 3]);
            ctx.beginPath();
            ctx.moveTo(c2.x, c2.y);
            ctx.lineTo(c2.x + 25, c2.y + 30);
            ctx.stroke();
            ctx.restore();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('m', c2.x + 15, c2.y + 15);
            ctx.font = 'italic 15px Times New Roman';
            ctx.fillText('2', c2.x + 23, c2.y + 22);
            ctx.font = 'italic 20px Times New Roman';

            // Radius R label
            const radius_angle_2 = 45 * Math.PI / 180;
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            drawArrow({ x: c2.x, y: c2.y }, { x: c2.x + R * Math.sin(radius_angle_2), y: c2.y + R * Math.cos(radius_angle_2) });
            ctx.fillText('R', c2.x + 15, c2.y + 35);

            // --- Right Side Annotations (as per image) ---
            // Small arrow pointing at suspension point
            drawArrow({ x: p2_ceil.x - 40, y: p2_ceil.y - 20 }, { x: p2_ceil.x, y: p2_ceil.y });
            
            const annot_x_right = p2_ceil.x + R * 0.9;
            // '2R' label
            ctx.beginPath();
            ctx.moveTo(annot_x_right, p2_ceil.y);
            ctx.lineTo(annot_x_right, c2.y);
            ctx.stroke();
            drawArrowOnLine(annot_x_right, p2_ceil.y, -Math.PI / 2, 8); // Arrow pointing up
            drawArrowOnLine(annot_x_right, c2.y, Math.PI / 2, 8);  // Arrow pointing down
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            ctx.fillText('2R', annot_x_right + 10, p2_ceil.y + R);

            // Solid bar part of suspension (drawn over rod) and its 'R' label
            ctx.save();
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(p2_ceil.x, p2_ceil.y);
            ctx.lineTo(p2_ceil.x, p2_ceil.y + R);
            ctx.stroke();
            ctx.restore();
            ctx.textAlign = 'left';
            ctx.fillText('R', p2_ceil.x + 10, p2_ceil.y + R / 2);

            // Vertical R height difference indicator
            const R_height_x = 320;
            ctx.beginPath();
            ctx.moveTo(R_height_x, p2_ceil.y);
            ctx.lineTo(R_height_x, p2_ceil.y + R);
            ctx.stroke();
            drawArrowOnLine(R_height_x, p2_ceil.y + R, Math.PI / 2, 8); // Arrow pointing down
            ctx.beginPath();
            ctx.moveTo(R_height_x - 5, p1_sus.y); // This corresponds to the T-like shape at lower level
            ctx.lineTo(R_height_x + 5, p1_sus.y);
            ctx.moveTo(R_height_x, p1_sus.y);
            ctx.lineTo(R_height_x, p1_sus.y + 20); // The small tick mark
            ctx.stroke();
            ctx.textAlign = 'right';
            ctx.fillText('R', R_height_x - 10, p2_ceil.y + R / 2);
        }

        draw();
    </script>
</body>
</html>